<template>
  <el-container direction="vertical">
    <!-- 顶部header，start -->
    <hpro-header type="custom">
      <el-row type="flex" justify="center">
        <el-col :xs="24" :sm="18" :md="16" :lg="16" :xl="16">
          <el-row type="flex" justify="space-between" align="middle">
            <el-col class="hui-text-left">
              <div class="hui-flex hui-flex--y-center hui-font-size-large">非码i应用平台</div>
            </el-col>
            <el-col class="hui-text-right">
              <el-button @click="handleLogout" type="text">退出登录</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </hpro-header>
    <!-- 顶部header，end -->

    <!-- 底部，start -->
    <el-main class="hui-p-0">
      <el-container>
        <el-main class="hui-p-0" style="height: calc(100vh - 60px);">
          <el-scrollbar class="hui-h-100" wrap-class="hui-overflow-x-hidden">
            <el-container direction="vertical">
              <!-- 操作区，start -->
              <el-main style="min-height: calc(100vh - 60px - 60px);">
                <el-row type="flex" justify="center">
                  <el-col :xs="24" :sm="18" :md="16" :lg="16" :xl="16">
                    <slot></slot>
                  </el-col>
                </el-row>
              </el-main>
              <!-- 操作区，end -->

              <!-- 底部footer，start -->
              <hpro-footer></hpro-footer>
              <!-- 底部footer，end -->
            </el-container>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-main>
    <!-- 底部，end -->
  </el-container>
</template>

<script>
export default {
  name: 'hpro-container-account',
  componentName: 'hpro-container-account',
  methods: {
    handleLogout () {
      console.log('退出登录，跳转intro页面')
      this.$router.push({
        path: '/'
      })
    }
  }
}
</script>

<style lang="less">
</style>
